<template>
    <div id="userDetail" >
        <!-- 用户信息 -->
        <div class="ueserHeader" v-if="isUser">
            <!-- 背景 -->
            <div class="detail_list_bg3" :style="{'background-image':'url(' + userList.profile.backgroundUrl+ ')'}"></div>
            <div class="detail_list_filter3"></div>
            <!-- 头部组件 -->
            <HeaderMusic></HeaderMusic>
            <!-- 头像  +关注 -->
            <div class="iconImg clearfix">
                <div class="avatarUrl">
                    <img :src="userList.profile.avatarUrl" alt="">
                </div>
                <!-- 关注  私信 -->
                <div class="follows">
                    <span class="follow">+ 关注</span>
                    <span class="privateLetter">
                        <span></span>
                    </span>
                </div>
            </div>
            <!-- 用户名 关注  粉丝 -->
            <div class="users">
                <h3>{{userList.profile.nickname}}</h3>
                <p v-if="userList.profile.mainAuthType">{{userList.profile.mainAuthType.desc}}</p>
                <p class="profileFollows"> 
                    <span>关注：{{userList.profile.follows}}</span>
                    <span class="vertical">|</span>
                    <span>关注：{{userList.profile.followeds}}</span>
                </p>
                <p class="isMember">
                    <span class="vip" v-if="userList.profile.vipType !== 0"></span>
                    <span class="gender_man" v-if="userList.profile.gender == 1"></span>
                    <span class="gender_woman" v-if="userList.profile.gender == 2"></span>
                    <span class="grade">Lv<span>{{userList.level}}</span></span>
                </p>
            </div>
        </div>
        <!-- 用户歌单列表 -->
        <div class="userSongsheetList" v-if="isUser">
            <van-tabs v-model="active">
                <van-tab>
                    <div slot="title">音乐</div>
                    <div class="musicCentent">
                        <div class="songSheetTitle clearfix">
                            <div class="songSheets">歌单<span>({{userList.profile.playlistCount}})</span></div>
                            <div class="collection">共被收藏{{userList.profile.playlistBeSubscribedCount.toString().length>5?(userList.profile.playlistBeSubscribedCount/10000)+'万':userList.profile.playlistBeSubscribedCount}}次</div>
                        </div>
                        <!-- 歌单 -->
                        <ul class="songDetails">
                            <li class="ranking clearfix">
                                <div class="icon">
                                    <span></span>
                                </div>
                                <div class="songdescribe">
                                    <div class="describeTitle">听歌排行</div>
                                    <div class="describePlaylist">累计听歌{{userList.listenSongs}}首</div>
                                </div>
                            </li>
                            <li class="clearfix" v-for="(item,index) in playList" :key='index' @click="songSheetTo(item)">
                                <div class="icon">
                                    <img :src="item.coverImgUrl" alt="">
                                </div>
                                <div class="songdescribe">
                                    <div class="describeTitle">{{item.name}}</div>
                                    <div class="describePlaylist">{{item.trackCount}}首,播放{{item.playCount.toString().length>5?(item.playCount/10000)+'万':item.playCount}}次</div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </van-tab>
                <van-tab>
                    <div slot="title" class="dynamic">动态 <span>{{userList.profile.eventCount}}</span></div>
                    <div>
                        以后写
                    </div>
                </van-tab>
                <van-tab>
                    <div slot="title">关于TA</div>
                    <div class="aboutCentnt">
                        <!-- 认证信息 -->
                        <ul class="authentication">
                            <li>认证消息</li>
                            <li v-for="(item,index) in userList.profile.allAuthTypes" :key="index">
                                <span class="icon_desc" v-if="item.desc"></span>{{item.desc}}
                            </li>
                        </ul>
                        <!-- 个人信息 -->
                        <ul class="information">
                            <li>个人信息</li>
                            <li>
                                等级：<span>Lv{{userList.level}}</span>
                            </li>
                            <li>
                                性别：<span>{{userList.profile.gender==1?'男':'女'}}</span>
                            </li>
                            <li>
                                年龄：<span>{{userList.profile.birthday}}</span>
                            </li>
                            <li>
                                地区：<span>{{userList.profile.province}}</span><span>{{userList.profile.city}}</span>
                            </li>
                            <li>
                                大学：<span>其他大学</span>
                            </li>
                        </ul>
                        <!-- 个人介绍 -->
                        <ul class="introduce">
                            <li>个人介绍</li>
                            <li>{{userList.profile.signature}}</li>
                        </ul>
                    </div>
                </van-tab>
            </van-tabs>
        </div>
        <!-- 底部导航 -->
        <Tabbar></Tabbar>
        <!-- loading加载 -->
        <Loading v-if="isLoging" ></Loading>
    </div>
</template>
<script>
import {mapGetters,mapState,mapMutations,mapActions} from "vuex";
import moment from 'moment'
import Loading from '@/components/Loading.vue'
import HeaderMusic from '@/components/HeaderMusic.vue'
import Tabbar from '@/components/Tabbar.vue'

export default {
    data () {
        return {
            userList:{},//用户信息
            active:0,
            playList:[],//歌单列表
            offsetTop:0,//滚动渐变色
            musicDetail:{//音乐id
                songId:null,//歌单id
                id:null,//音乐id
                title:null,//歌曲名字
                author:null,//作者
                img:null,//背景图
                url:null,//歌曲地址
                lrc:null,//歌词
                list:[],//歌曲列表
            },
            isUser:false,//控制页面内容
            isLoging:true,//loading加载
        }
    },
    computed: {
        ...mapState(["songSheet"])
    },
    components: {
       Loading,
       HeaderMusic,
       Tabbar
    },
    watch:{
        'songSheet.userId':{
            handler: function (newVal,oldVal){
                if(newVal !== oldVal){
                    this.getUserLists();
                    
                }
            }
        }
    },
    created () {
        this.getUserLists();
         
    },
    methods: {
        
        getUserLists(){
            this.isLoging = true;
            this.isUser = false;
            const userId = this.songSheet.userId?this.songSheet.userId:JSON.parse(sessionStorage.getItem("songSheetVuex")).userId;
            const params = {
                    uid:userId,
                }
            this.axios.all([
                this.axios.get('/music/user/playlist',{params:params}),//获取用户歌单
                this.axios.get('/music/user/detail',{params:params}),//获取用户详情
                this.axios.get('/music/user/subcount',{params:params}),//
                this.axios.get('/music/user/event',{params:params}), //获取用户动态
            ]).then(this.axios.spread((playlist,detail,dj,event) => {
                console.log()
                this.userList = detail.data;
                this.playList = playlist.data['playlist'];
                // 截取年月日
                this.userList.profile.birthday =  moment(this.userList.profile.birthday).format().replace('T','  ').replace('+08:00','').substring(0,10);
                // 获取省份
                this.userList.profile.province = City[this.userList.profile.province];
                // 获取城市
                this.userList.profile.city = City[this.userList.profile.city];

                //数据加载完加载 取消loading
                setTimeout(() =>{
                    this.isLoging = false;
                    this.isUser = true;
                },1000)
            }))
        },
        //歌单跳转
        songSheetTo(item){
            this.musicDetail.songId = item.id;
            this.$store.commit('getMusicDetail', this.musicDetail);
            this.$router.push('/playMusic');
        },
    },
     mounted(){
         //滚动事件
        var toolbar=document.getElementById("toolbar") 
        window.addEventListener('scroll',()=>{
            this.offsetTop=window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
            if (this.offsetTop>250) {
            $('#toolbar').css({'background':'#000'});
            }else{
                $('#toolbar').css({'background':'transparent'});
            }
        },true);
  }
}
</script>

<style lang='less'>
    #userDetail{
        .van-tabs__content{
            overflow:hidden;
        }
        .ueserHeader{
            height: 300px;
            position: relative;
            .detail_list_bg3{
                width: 100%;
                height: 100%;
                background: 0 60%;
                background-size: cover;
                position: absolute;
                left: 0;
                top: 0;
            }
            .detail_list_filter3{
                 width: 100%;
                height: 100%;
                background-color: #40454d;
                opacity: 0.35;
                position: absolute;
                left: 0;
                top: 0;
                z-index: 1;
            }
            header{
                height: 50px;
                line-height: 50px;
                color: #fff;
                z-index: 4;
                position: fixed;
                top: 0;
                width: 100%;
                ul{
                    li{
                        width: 50%;
                        color: #fff;
                        float: left;
                    }
                    .more_play{
                        text-align: right;
                        float: right;
                        span{
                            display: inline-block;
                            width: 18px;
                            height: 18px;
                            background-position: 0;
                            background-repeat: no-repeat;
                            background-size: 18px 18px;
                            vertical-align: middle;
                            margin-right: 20px;
                        }
                        .more_white{
                            background-image:url('../images/wyy/more_white.svg')
                        }
                        .in_play{
                            background-image:url('../images/wyy/in_play.svg')
                        }
                    }
                    .back_arrow{
                        i{
                            font-size: 20px;
                            vertical-align: middle;
                            padding-left: 10px;

                        }
                    }
                }
            }
            .iconImg{
                position: relative;
                z-index: 2;
                margin: 30px 15px;
                margin-top:0;
                .avatarUrl{
                    padding-top: 80px;
                    width: 60px;
                    height: 60px;
                    float: left;
                    img{
                        width: 100%;
                        height: 100%;
                        border-radius: 50%;
                    }
                }
                .follows{
                    padding-top: 80px;
                    float:right;
                    position: absolute;
                    top: 50%;
                    transform: translate(0,-50%);
                    right: 0;
                    .follow{
                        color: #fff;
                        display: inline-block;
                        padding: 5px 10px;
                        background-color: #353A3D;
                        padding: 6px 20px;
                        border-radius: 5px;
                    }
                    .privateLetter{
                        display: inline-block;
                        padding: 5px;
                        background-color: #a09a93;
                        margin-left: 5px;
                        border-radius: 5px;
                        vertical-align: top;
                        span{
                            display: inline-block;
                            width: 20px;
                            height: 20px;
                            background-position: 0;
                            background-repeat: no-repeat;
                            background-size: 20px 20px;
                            vertical-align: middle;
                            background-image:url('../images/wyy/message_black.svg');
                        }
                    }
                }  
            }
            .users{
                position: relative;
                z-index: 2;
                color: #fff;
                padding: 0 15px;
                h3{
                    font-size: 20px;
                }
                p{
                    margin-top: 5px;
                    font-size: 12px;
                }
                .profileFollows{
                    .vertical{
                        margin: 0 10px;
                    }
                }
                .isMember{
                    span{
                        display: inline-block;
                        background-position: 0;
                        background-repeat: no-repeat;
                        vertical-align: middle;
                    }
                    .vip{
                        background-image:url('../images/wyy/vip.svg'); 
                        background-size: 30px 30px;
                        width: 30px;
                        height: 15px;
                    }
                    .gender_man{
                        background-image:url('../images/wyy/man.svg');
                        background-size: 15px 15px;
                        width: 20px;
                        height: 15px;
                        margin-left: 5px;
                    }
                    .gender_woman{
                        background-size: 15px 15px;
                        width: 20px;
                        height: 15px;
                        margin-left: 5px;
                        background-image:url('../images/wyy/woman.svg'); 
                    }
                    .grade{
                        font-size: 14px;
                        span{
                            font-size: 10px;
                        }
                    }
                }
            }
        }
        .userSongsheetList{
            margin-bottom: 50px;
            .van-tabs {
                margin-top: -20px;
                position: relative;
                .van-hairline--top-bottom::after{
                    border-width: 0;
                }
                .van-tabs__wrap {
                    position: absolute;
                    top: 0;
                    z-index: 2;
                    border-bottom: solid 1px #e2e0e0;
                }
                .van-tab__pane{
                    margin-top: 0;
                }
                .van-tab{
                    color: #000;
                    font-weight: 600;
                    .dynamic{
                        span{
                            display: inline-block;
                            font-size: 10px;
                            color: #888;
                            font-family: cursive;
                        }
                    }
                }
                .van-tabs__nav--line{
                    border-top-left-radius: 20px;
                    border-top-right-radius: 20px;
                }
                .musicCentent{
                    margin-top: 20px;
                    padding: 0 15px;
                    .songSheetTitle{
                        .songSheets{
                            float: left;
                            font-weight: 600;
                            span{
                                font-size: 10px;
                                color: #888;
                                margin-left: 2px;
                            }
                        }
                        .collection{
                            float:right;
                            color: #888;
                        }
                    }
                }
                .aboutCentnt{
                    padding: 20px;
                    .authentication{
                        li:nth-of-type(1){
                            font-size: 14px;
                            font-weight: 600;
                        }
                        li{
                            margin-top: 5px;
                            font-size: 12px;
                            .icon_desc{
                                margin-right: 5px;
                                display: inline-block;
                                width: 20px;
                                height: 20px;
                                background-position: 0;
                                background-repeat: no-repeat;
                                background-size: 20px 20px;
                                vertical-align: middle;
                                background-image:url('../images/wyy/xx_yellow.svg');
                            }
                        }
                    }
                    .information{
                        margin-top: 20px;
                        li:nth-of-type(1){
                            font-size: 14px;
                            font-weight: 600;
                        }
                        li{
                            margin-top: 5px;
                            font-size: 12px;
                        }
                    }
                    .introduce{
                        margin-top: 20px;
                        li:nth-of-type(1){
                            font-size: 14px;
                            font-weight: 600;
                        }
                        li{
                            margin-top: 5px;
                            font-size: 12px;
                        }
                    }
                }
                .songDetails{
                    margin-top: 10px;
                    .ranking{
                        .icon{
                            background-color: #F48678;
                            border-radius: 5px;
                            text-align: center;
                            line-height: 45px;
                        }
                        span{
                            display: inline-block;
                            width: 20px;
                            height: 20px;
                            background-position: 0;
                            background-repeat: no-repeat;
                            background-size: 20px 20px;
                            vertical-align: middle;
                            background-image:url('../images/wyy/in_play.svg');
                        }
                    }
                    li{
                        margin-top: 10px;
                        .icon{
                            float: left;
                            width: 45px;
                            height: 45px;
                            img{
                                width: 100%;
                                height: 100%;
                                border-radius: 5px;
                            }
                        }
                        .songdescribe{
                            height: 45px;
                            width: 80%;
                            float: left;
                            margin-left: 10px;
                            .describeTitle{
                                overflow: hidden;
                                font-weight: 600;
                                height: 20px;
                                white-space: nowrap;
                                text-overflow: ellipsis;
                            }
                            .describePlaylist{
                                overflow: hidden;
                                font-size: 10px;
                                margin-top: 5px;
                                color: #888;
                            }
                        }
                    }
                }
            }
        }
    }
</style>


